<!-- 订单页面 -->
<template>
  <!-- 导航区域 -->
  <van-nav-bar
    title="订单确认"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />

  <!-- 主体区域 -->
  <div class="container">
    <!-- 1. 收货地址信息区域 -->
    <div class="address_card" @click="triggerPopup">
      <!-- 用户信息 -->
      <p class="info">
        <!-- 用户名 -->
        <span class="username">{{ currentAddress?.name }}</span>
        <!-- 用户电话 -->
        <span>{{ currentAddress?.tel }}</span>
      </p>

      <!-- 地址详情区域 -->
      <p class="detail">
        <span class="default" v-if="currentAddress.isDefault === 1">[默认]</span>
        <span class="detail_address">
          {{ currentAddress?.address }}
        </span>
      </p>
    </div>

    <!-- 2. 地址选择弹出层 -->
    <van-popup
      v-model:show="popupStatus"
      position="bottom"
    >
      <!-- 地址选择列表 -->
      <van-address-list
        v-model="chosenAddressId"
        :list="addressList"
        default-tag-text="默认"
        @click-item="changeAddress"
        @add="onAdd"
        @edit="onEdit"
      >
        <!-- 地址列表的数据为空时，显示该内容 -->
        <template #top v-if="isEmpty">
          <van-empty description="你还没有添加收货地址~" />
        </template>
      </van-address-list>
    </van-popup>

    <!-- 3. 商品列表区域 -->
    <div class="product_list">
      <!-- 标题区域 -->
      <van-cell-group>
        <van-cell :title="totalCount" />
      </van-cell-group>

      <!-- 商品列表区域 -->
      <van-cell-group>
        <van-cell
          class="product"
          v-for="cart in cartList"
          :key="cart.id"
        >
          <!-- 商品图片 -->
          <img :src="cart.productInfo.image">

          <!-- 商品信息 -->
          <div class="info">
            <p class="title">
              {{ cart.productInfo.store_name }}
            </p>
            <p class="price">
              ￥{{ cart.truePrice }}
            </p>
          </div>
          <span class="count">
            ×{{ cart.cart_num }}
          </span>
        </van-cell>
      </van-cell-group>
    </div>
  </div>

  <!-- 底部提交订单区域 -->
  <van-submit-bar
    :price="totalPrice"
    label="订单总计："
    button-text="立即付款"
    @submit="handlePay"
  />
  <!-- 支付弹出层区域 -->
  <van-action-sheet
    v-model:show="showPay"
    title="请选择支付方式"
    cancel-text="取消"
    close-on-click-action
  >
    <!-- 付款列表区域 -->
    <template #default>
      <van-radio-group v-model="paymentMethod">
        <van-cell-group>
          <!-- 余额支付 -->
          <van-cell
            clickable
            title="微信支付"
            label="微信快捷支付"
            @click="paymentMethod = 'wechat'"
            size="large"
            center
          >
            <template #icon>
              <van-icon
                name="http://www.lgstatic.com/lg-app-fed/pay/images/wechat_b787e2f4.png"
                size="30"
                :style="{ marginRight: '12px' }"
              />
            </template>
            <template #right-icon>
              <van-radio
                name="wechat"
                checked-color="#ee0a24"
              />
            </template>
          </van-cell>
          <!-- 支付宝 -->
          <van-cell
            clickable
            title="支付宝"
            label="支付宝快捷支付"
            @click="paymentMethod = 'alipay'"
            size="large"
            center
          >
            <template #icon>
              <van-icon
                name="http://www.lgstatic.com/lg-app-fed/pay/images/ali_ed78fdae.png"
                size="30"
                :style="{ marginRight: '12px' }"
              />
            </template>
            <template #right-icon>
              <van-radio
                name="alipay"
                checked-color="#ee0a24"
              />
            </template>
          </van-cell>
          <!-- 余额支付 -->
          <van-cell
            clickable
            title="余额支付"
            :label="`可用余额为：${ yue }元`"
            @click="paymentMethod = 'yue'"
            size="large"
            center
          >
            <template #icon>
              <van-icon
                name="gold-coin"
                color="#FF9900"
                size="30"
                :style="{ marginRight: '12px' }"
              />
            </template>
            <template #right-icon>
              <van-radio
                name="yue"
                checked-color="#ee0a24"
              />
            </template>
          </van-cell>
          <van-cell>
            <van-button
              round
              type="danger"
              block
              @click="initPayMoney"
            >
              去支付
            </van-button>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </template>
  </van-action-sheet>
</template>

<script setup>
// -------------------------------- 导入模块 ---------------------------------
// 导入 vue3 的 API
import { ref, computed, toRaw, toRefs } from 'vue'
// 导入 vue-router 的 API
import { useRouter } from 'vue-router'

// 导入封装的订单数据接口
// 1、getAddressList：获取用户收货地址
// 2、confirmOrder：获取订单页面中的要购买的商品数据
// 3、createOrder：创建订单
import { getAddressList, confirmOrder, createOrder } from '@/api/order_api'

// 导入自己封装的功能函数
import judgeRequest from '@/utils/judge_request' // 判断请求状态

// 导入 vant 组件，按需引入
import {
  Toast,
  NavBar as VanNavBar,
  Popup as VanPopup,
  AddressList as VanAddressList,
  Empty as VanEmpty,
  CellGroup as VanCellGroup,
  Cell as VanCell,
  SubmitBar as VanSubmitBar,
  ActionSheet as VanActionSheet,
  RadioGroup as VanRadioGroup,
  Icon as VanIcon,
  Radio as VanRadio,
  Button as VanButton
} from 'vant'

// -------------------------------- 声明数据 ---------------------------------
// 购物车页面传递过来的商品 id
const props = defineProps({
  // 订单中购买的商品的 id
  cartId: {
    type: String,
    required: true
  }
})
const { cartId } = toRefs(props) // 获取到订单中商品的 id

const router = useRouter() // 初始化路由实例
const popupStatus = ref(false) // 控制地址选择弹出层显示隐藏
const addressList = ref([]) // 在地址选框列表要展示的地址数据
const currentAddress = ref({}) // 当前地址栏要展示的地址信息
const chosenAddressId = ref('') // 地址选框的地址选中某一项的状态控制
const isEmpty = computed(() => addressList.value?.length === 0) // 当列表地址为空，控制显示空状态
const orderConfirmInfo = ref([]) // 订单页面中的数据
const cartList = computed(() => orderConfirmInfo.value?.cartInfo) // 订单页面中的商品列表数据
const orderKey = computed(() => orderConfirmInfo.value?.orderKey) // 订单 id
// 商品总共件数
const totalCount = computed(() => {
  const total = cartList.value?.reduce((sum, item) => {
    sum += item.cart_num
    return sum
  }, 0)
  return '共' + (total || 0) + '件'
})
// 商品总价
const totalPrice = computed(() => orderConfirmInfo.value?.priceGroup?.totalPrice * 100 || 0)
const showPay = ref(false) // 控制支付弹出层的显示隐藏
// yue 是余额支付；wechat 是微信支付；alipay 是支付宝支付
const paymentMethod = ref('yue') // 支付方式
const yue = computed(() => orderConfirmInfo.value?.userInfo?.now_money || 0) // 用户余额

// -------------------------------- 函数封装 ---------------------------------
// 返回上级路由
const onClickLeft = () => router.back()

// 转换地址列表数据格式的函数
const converData = data => {
  return data.map(item => {
    // 转换数据格式的新数据
    const newData = {
      id: item.id,
      name: item.real_name,
      tel: item.phone,
      address: item.province + item.city + item.district + item.detail,
      isDefault: item.is_default
    }

    // 检测当前数据是否为默认数据
    if (item.is_default === 1) {
      // 修改当前的地址信息
      currentAddress.value = newData
    }

    // 返回这个新数据
    return newData
  })
}

// 获取用户收获地址函数
const initAddressList = async () => {
  const data = await getAddressList() // 发送请求
  const result = judgeRequest(data.status, '获取用户收获地址失败！') // 判断请求结果

  // 如果请求成功
  if (result) {
    addressList.value = converData(data.data) // 获取收货地址
    // 获取默认地址被选中的那项的 id
    chosenAddressId.value = addressList.value.find(item => item.isDefault === 1).id
  }
}

// 点击地址栏弹出地址选框层
const triggerPopup = () => {
  popupStatus.value = true // 显示弹框
}

// 点击地址列表中的选项，切换地址的事件
const changeAddress = item => {
  popupStatus.value = false // 关闭弹框
  currentAddress.value = toRaw(item) // 页面显示更改选中的信息
}

// 新增地址
const onAdd = () => {
  // 跳转到编辑地址页面
  router.push({
    name: 'address',
    // 当从编辑地址页面再跳回订单页面的时候，订单商品的 id 会被清除掉
    // 所以跳回该页面的时候再将订单中的商品 id 一起传回来
    params: {
      cartId: toRaw(cartId.value)
    }
  })
}

// 编辑地址
const onEdit = (item, index) => {
  // 跳转到编辑地址页面
  router.push({
    name: 'address'
  })
}

// 获取订单页面中的商品列表
const initOrderList = async () => {
  // 发送请求
  const data = await confirmOrder({
    cartId: toRaw(cartId.value), // 商品 id
    new: 0 // 新建订单的操作
  })
  const result = judgeRequest(data.status, '获取用户收获地址失败！') // 判断请求结果

  // 如果请求成功
  if (result) {
    orderConfirmInfo.value = data.data // 获取商品列表数据
  }
}

// 点击支付按钮弹出支付层
const handlePay = () => {
  showPay.value = true
}

// 点击去支付按钮发送支付请求
const initPayMoney = async () => {
  // 发送请求
  const data = await createOrder(orderKey.value, {
    addressId: currentAddress.value.id, // 收获地址 id
    payType: paymentMethod.value // 支付方式
  })
  const result = judgeRequest(data.status, '创建订单失败！') // 判断请求结果

  // 如果请求成功
  if (result) {
    // 提示支付成功
    Toast.success('支付成功，正在跳转订单详情页...')
    router.push({
      name: 'order-detail',
      params: {
        orderId: toRaw(data.data.result.orderId)
      }
    })
  }
}

// -------------------------------- 函数调用 ---------------------------------
initAddressList() // 调用获取用户收获地址函数
initOrderList() // 调用获取订单页面中的商品列表函数
</script>

<style lang="scss" scoped>
// 顶部导航区域
.van-nav-bar{
  position: fixed !important;
  width: 100%;
}

// 订单主体区域
.container {
  padding: 50px 0;

  // 收获地址详情区域
  .address_card {
    position: relative;
    padding: 20px 25px;
    font-size: 16px;

    // 区域下面的彩色线条
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      // repeating-linear-gradient 背景颜色重复显示
      background: repeating-linear-gradient(
          90deg,              // 背景旋转 90 度横向排列
          #FF6C6C 0,
          #FF6C6C 20%,      // 从 0% - 20% 显示 #FF6C6C 颜色
          transparent 20%,
          transparent 25%,    // 从 20% - 25% 显示透明颜色
          #0084FF 25%,
          #0084FF 45%,      // 从 25% - 45% 显示 #0084FF 颜色
          transparent 45%,
          transparent 50%,);  // 从 45% - 59% 显示透明颜色
      background-size: 80px; // 设置背景大小，让线段小一点
    }

    // 用户信息
    .info {
      display: flex;
      align-items: center;

      // 用户姓名
      .username {
        width: 20%;
        padding-right: 20px;
      }
    }

    // 地址详情区域
    .detail {
      display: flex;
      align-items: center;
      padding-top: 5px;

      .default {
        margin-right: 30px;
        padding: 2px 3px;
        background-color: #D6251F;
        border-radius: 3px;
        text-align: center;
        font-size: 12px;
        color: #fff;
      }

      .detail_address {
        // 超过一行显示省略号
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 1;
      }
    }
  }

  // 商品列表区域
  .product_list {
    :deep(.van-cell__value) {
      display: flex;
      align-items: center;
    }

    // 商品 item 区域
    .product {
      img {
        width: 70px;
        height: 70px;
      }

      // 商品信息区域
      .info {
        padding-left: 5px;

        .title {
          padding: 0 15px 5px 0;
          // 超过一行显示省略号
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          -webkit-line-clamp: 1;
        }

        .price {
          color: #F2270C;
        }
      }

      .count {
        color: #aaa;
      }
    }
  }
}
</style>
